<!-- 
  视频 103
-->

<template>
  <div>
    <h2>我是首页</h2>
    <p>我是首页内容，哈哈</p>
    <button @click="btnClick">跳转到 用户 界面</button>

    <button @click="newsClick">新闻</button>
    <button @click="massageClick">消息</button>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      path: '/home/news'
    }
  },
  methods: {
    btnClick() {
      this.$router.push('user')
    },
    newsClick() {
      // this.$router.push('/home/news') // children 这个应该是 完整路径

      //这里一直有报错 , 看readme.md
      //vue-router.esm.js?8c4f:2089 Uncaught (in promise)
      // 我点击`首页` 在点击 `新闻`
      // 正常需求情况下，不应有这种操作，应该按钮置灰不可点击
      //    因为当前处于活跃状态
      let oldPath = '/home/news';
      let route = this.$route || {};
      let currentPath = route.path || ''
      if(oldPath != currentPath) {
        this.$router.push('/home/news')
      }
      else {
        // console.log('不能再点击了，要是不处理你，就error拉')
      }
    },
    massageClick() {
      this.$router.push('/home/message') // children 这个应该是 完整路径
      this.testSrx()
    }
  },
  created() {
    console.log('home created')
  },
  destroyed() {
    console.log('home destroyed')
  },

//--------------------------------------------------
  //首页中，使用 path 记录离开时的路径

  //下面2个函数，只有该组件被保持了状态使用了<keep-alive>时，才是有效的
  activated() {
    // 视频 116
    console.log('home activated, 当前窗口活跃')
    this.$router.push(this.path)
  },
  deactivated() {
    // 视频 116
    console.log('home activated, 当前窗口不 不不活跃')
  },
  beforeRouteLeave (to, from ,next) {
    // 视频 116
    console.log('home route path=', this.$route.path)
    this.path = this.$route.path;
    next();
  }
}
</script>